<template>
  <div>
    <form @submit.prevent="fn1">
      <label>姓名：</label>
      <input type="text" v-model="uname"><br><br>

      <label>年龄：</label>
      <input type="number" ><br><br>

      <label>身高：</label>
      <input type="text" v-model.trim="height">(米)<br><br>

      <label>体重：</label>
      <input type="text" v-model.trim="weight">(公斤)<br><br>

      <label>病史：</label>
      <input type="text" ><br><br>
    

      <button>诊断</button>
    </form>

    <p v-show="flge">患者{{uname}}的诊断结果：{{result}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uname:'',
      height:'',
      weight:'',
      flge:false,
      bim: '',
      result:'',
    }
  },
  methods: {
     fn1(){
      this.flge=!this.flge
      this.bim=this.weight/(this.height*2)
      if(this.bim>=18.5&&this.bim<=23.9) {this.result= '正常'}
      else if(this.bim>=24&&this.bim<=27.9){this.result= "超重"}
      else if(this.bim>=28) { this.result="肥胖"}
      else { this.result="消瘦"}
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
